<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>直播间</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs
      v-model="activeName"
      type="card"
      style="margin-top: 10px"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane label="全部" name=""></el-tab-pane>
      <el-tab-pane label="直播中" name="1"></el-tab-pane>
      <el-tab-pane label="未开播" name="0"></el-tab-pane>
      <el-tab-pane label="已结束" name="3"></el-tab-pane>
    </el-tabs>
    <el-table
      class="image-table"
      height="400"
      :header-cell-style="{ background: '#f8f9fa' }"
      :data="tableData"
      @select="selecttable"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column type="selection" width="100" />

      <el-table-column type="index" label="序号" width="100" />
      <el-table-column prop="title" label="直播间名称" />

      <el-table-column prop="cover" label="直播间封面">
        <template #default="scope">
          <el-image
            style="width: 50px; height: 50px; border-radius: 50%"
            :src="scope.row.cover"
            :preview-src-list="[scope.row.cover]"
          />
        </template>
      </el-table-column>
      <el-table-column prop="key" label="弹幕数" />
      <el-table-column prop="look_count" label="观看人数" />
      <el-table-column prop="coin" label="金币数" />
       <el-table-column prop="created_time" label="创建时间" width="150">
                      
                      </el-table-column>

      <el-table-column label="操作" width="550px">
        <template #default="scope">
          <div>
            <el-button type="success"
            @click="opentc(scope.row.id)"
              >观看记录({{ scope.row.look_count }})</el-button
            >

            <el-button type="warning"
             @click="opentc2(scope.row.id)"
              >礼物记录({{ scope.row.coin }})</el-button
            >
            <el-button type="info"
             @click="opentc3(scope.row.id)"
              >弹幕记录({{ scope.row.key }})</el-button
            >
            <el-button type="danger"
            v-if="scope.row.status  == 1||scope.row.status  == 2"
            @click="closezb(scope.row.id)"
              >关闭直播</el-button
            >
                        <!-- <el-button type="danger"
              >删除</el-button
            > -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px; text-align: right">
      <el-pagination
        layout="total,prev, pager, next"
        v-model:currentPage="page"
        style="float: right"
        :page-size="limit"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="30%"
      :before-close="handleClose"
    > <el-table
      class="image-table"
      height="400"
       v-if="title == '观看记录'"
      :header-cell-style="{ background: '#f8f9fa' }"
      :data="tableData1"
      style="width: 100%; margin-top: 20px"
    >
    

      <el-table-column type="username" label="观看用户" width="100" >
        <template #default="scope">
            {{scope.row.user.name}}
        </template>
      </el-table-column>
      <el-table-column prop="created_time" label="时间" />
</el-table>
<el-table
      class="image-table"
      height="400"
       v-if="title == '礼物记录'"
      :header-cell-style="{ background: '#f8f9fa' }"
      :data="tableData2"
      style="width: 100%; margin-top: 20px"
    >
    

      <el-table-column type="username" label="用户" width="100" >
        <template #default="scope">
            {{scope.row.user.name}}
        </template>
      </el-table-column>
            <el-table-column type="username" label="礼物" width="100" >
        <template #default="scope">
            {{scope.row.gift.name}}
        </template>
      </el-table-column>
      <el-table-column prop="created_time" label="时间" />
</el-table>
<el-table
      class="image-table"
      height="400"
       v-if="title == '弹幕记录'"
      :header-cell-style="{ background: '#f8f9fa' }"
      :data="tableData3"
      style="width: 100%; margin-top: 20px"
    >
    

      <el-table-column type="username" label="用户" width="100" >
        <template #default="scope">
            {{scope.row.user.name}}
        </template>
      </el-table-column>
            <el-table-column prop="content" label="弹幕内容" width="100" >

      </el-table-column>
      <el-table-column prop="created_time" label="时间" />
</el-table>

    </el-dialog>
  </div>
</template>
<style >
.avatar1 {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
<script setup>
import service from "../utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
import JSZip from "jszip";
import FileSaver from "file-saver";
import { onMounted, ref } from "vue";
import axios from "axios";
const activeName = ref("");
const total = ref(0);
const ruleForm = ref({});
const limit = ref(10);
const page = ref(1);
const imageUrl = ref("");
const dialogVisible = ref(false);
const fileList = ref([]);
const tableData = ref([]);
const tableData1 = ref([]);
const tableData2 = ref([]);
const tableData3 = ref([]);
const selectlist = ref([]);
const userinfo = ref({});
onMounted(() => {
  userinfo.value = JSON.parse(window.localStorage.getItem("userinfo"));
  getdata();
});
const opentc3=(e)=>{
     dialogVisible.value=true

title.value="弹幕记录"
service.post("/livecontent/list",{
    liveid:e
}).then(res=>{
    tableData3.value=res.data
    console.log(res,"res")
})
}
const closezb=(e)=>{
     ElMessageBox.confirm("是否确认关闭该直播？", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    center: true,
  })
    .then(() => {
      service
        .post("/livecontent/closezb", {
          id: e,
        })
        .then((res) => {
          ElMessage({
            type: "success",
            message: "关闭成功",
          });
          getdata();
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
}
const opentc2=(e)=>{
     dialogVisible.value=true

title.value="礼物记录"
service.post("/livegift/list",{
    liveid:e
}).then(res=>{
    tableData2.value=res.data
    console.log(res,"res")
})
}
const opentc=(e)=>{
    dialogVisible.value=true

title.value="观看记录"
service.post("/liveuser/list",{
    liveid:e
}).then(res=>{
    tableData1.value=res.data
    console.log(res,"res")
})
}
const handleClick = (e, f) => {
  console.log(e, f, "e");
  if (e.index == 0) {
    activeName.value = "";
  }
  if (e.index == 1) {
    activeName.value = 1;
  }
  if (e.index == 2) {
    activeName.value = 0;
  }
  if (e.index == 3) {
    activeName.value = 3;
  }
  getdata();
};
const selecttable = (e) => {
  console.log(e, "ed");
  selectlist.value = e;
};

const handleRemove = () => {};
const handleAvatarSuccess = (e) => {
  console.log(e, "e");
  imageUrl.value = e.data;
};
const handleClose = () => {
  dialogVisible.value = false;
};

const shanchu = (row) => {
  ElMessageBox.confirm("是否确认删除该礼物？", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
    center: true,
  })
    .then(() => {
      service
        .post("/gift/delete", {
          id: row.id,
        })
        .then((res) => {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          getdata();
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};
const title = ref("");
const add = () => {
  title.value = "新增礼物";
  imageUrl.value = "";
  fileList.value = [];
  ruleForm.value = {};
  dialogVisible.value = true;
};
const edit = (row) => {
  console.log(row);
  title.value = "编辑礼物";
  ruleForm.value = row;
  imageUrl.value = row.image;
  fileList.value = [];
  if (row.note !== "") {
    fileList.value.push({
      url: row.note,
      name: row.notename,
    });
  }

  dialogVisible.value = true;
};
const submitForm = () => {
  console.log(fileList.value, "fileList");

  if (!ruleForm.value.name) {
    ElMessage({
      message: "请输入名称",
      type: "warning",
    });
    return;
  }

  if (imageUrl.value == "") {
    ElMessage({
      message: "请上传礼物图标",
      type: "warning",
    });
    return;
  }
  let url = "";
  let obj = {};
  if (title.value == "新增礼物") {
    url = "/gift/add";
    obj = {
      name: ruleForm.value.name,
      image: imageUrl.value,
      coin: ruleForm.value.coin,
    };
  } else {
    url = "/gift/edit";
    obj = {
      name: ruleForm.value.name,
      image: imageUrl.value,
      coin: ruleForm.value.coin,
      id: ruleForm.value.id,
    };
  }
  service.post(url, obj).then((res) => {
    if (res.code == 200) {
      dialogVisible.value = false;
      ElMessage({
        message: "成功",
        type: "success",
      });
      getdata();
    }
  });
};
const handleSizeChange = (f) => {
  limit.value = f;
  getdata();
};
const handleCurrentChange = (f) => {
  page.value = f;
  getdata();
};

const getdata = () => {
  service
    .post("/live/list", {
      page: page.value,
      limit: limit.value,
      status: activeName.value,
    })
    .then((res) => {
      console.log(res, "r");
      tableData.value = res.data.data;
      total.value = res.data.count;
    });
};
</script>